<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz</title>
    
    <meta name="description" content="impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com." />
    <meta name="author" content="Bartek Szopka" />

    <link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />

    <!--
        
        Impress.js doesn't depend on any external stylesheet. Script adds all styles it needs for
        presentation to work.
        
        This style below contains styles only for demo presentation. Browse it to see how impress.js
        classes are used to style presentation steps, or how to apply fallback styles, but I don't want
        you to use them directly in your presentation.
        
        Be creative, build your own. We don't really want all impress.js presentations to look the same,
        do we?
        
        When creating your own presentation get rid of this file. Start from scratch, it's fun!
        
    -->
    <link href="css/impress-demo.css" rel="stylesheet" />
    
    <link rel="shortcut icon" href="favicon.png" />
    <link rel="apple-touch-icon" href="apple-touch-icon.png" />
</head>

<!--
    
    Body element is used by impress.js to set some useful class names, that will allow you to detect
    the support and state of the presentation in CSS or other scripts.
    
    First very useful class name is `impress-not-supported`. This class means, that browser doesn't
    support features required by impress.js, so you should apply some fallback styles in your CSS.
    It's not necessary to add it manually on this element. If the script detects that browser is not
    good enough it will add this class, but keeping it in HTML means that users without JavaScript
    will also get fallback styles.
    
    When impress.js script detects that browser supports all required features, this class name will
    be removed.
    
    The class name on body element also depends on currently active presentation step. More details about
    it can be found later, when `hint` element is being described.
    
-->
<body class="impress-not-supported">

<!--
    For example this fallback message is only visible when there is `impress-not-supported` class on body.
-->
<div class="fallback-message">
    <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
    <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>

<!--
    
    Now that's the core element used by impress.js.
    
    That's the wrapper for your presentation steps. In this element all the impress.js magic happens.
    It doesn't have to be a `<div>`. Only `id` is important here as that's how the script find it.
    
    You probably won't need it now, but there are some configuration options that can be set on this element.
    
    To change the duration of the transition between slides use `data-transition-duration="2000"` giving it
    a number of ms. It defaults to 1000 (1s).
    
    You can also control the perspective with `data-perspective="500"` giving it a number of pixels.
    It defaults to 1000. You can set it to 0 if you don't want any 3D effects.
    If you are willing to change this value make sure you understand how CSS perspective works:
    https://developer.mozilla.org/en/CSS/perspective
    
    But as I said, you won't need it for now, so don't worry - there are some simple but interesing things
    right around the corner of this tag ;)
    
-->
<div id="impress">

    <!--
        
        Here is where interesting thing start to happen.
        
        Each step of the presentation should be an element inside the `#impress` with a class name
        of `step`. These step elements are positioned, rotated and scaled by impress.js, and
        the 'camera' shows them on each step of the presentation.
        
        Positioning information is passed through data attributes.
        
        In the example below we only specify x and y position of the step element with `data-x="-1000"`
        and `data-y="-1500` attributes. This means that **the center** of the element (yes, the center)
        will be positioned in point x = -1000px and y = -1500px of the presentation 'canvas'.
        
        It will not be rotated or scaled.
        
    -->
    <div id="intro" class="step slide" data-x="-1000" data-y="-1500">
        <q>Modelling Systems Biology BigData by having the modelling travel to where the data is</q>
        <p>&nbsp;</p>
        <p style="color:navy;font-size:x-large"><a href="http://jonasalmeida.info" target=_blank>Jonas S Almeida (<span style="color:blue;font-size:large"> jonasalmeida.info</span></a>)<br><a href="http://adussaq.github.com/kinomicDataQC/" target=_blank>Alex Dussaq</a>, David Robbins, Sean Wilkinson, Robert Hackney</p>
        <p>&nbsp;</p>
        <p><i><a href="http://uab.mathbiol.org/informatics" target=_blank>Div Informatics</a>, Dept Pathology<br>
        Univ Alabama at Birmingham</i></p>
    </div>

    

    <!--
        
        The `id` attribute of the step element is used to identify it in the URL, but it's optional.
        If it is not defined, it will get a default value of `step-N` where N is a number of slide.
        
        So in the example below it'll be `step-2`.
        
        The hash part of the url when this step is active will be `#/step-2`.
        
        You can also use `#step-2` in a link, to point directly to this particular step.
        
        Please note, that while `#/step-2` (with slash) would also work in a link it's not recommended.
        Using classic `id`-based links like `#step-2` makes these links usable also in fallback mode.
        
    -->

    <div id="webMetabol" class="step slide" data-x="0" data-y="-1500">
        <!--<span style="font-size:medium;line-height:0;color:navy">Voit, E.O., J.S.Almeida (2004) Decoupling Dynamical Systems for Pathway Identification from Metabolic Profiles. Bioinformatics, 20(11):1670-81 [PMID:14988125].</span>-->
        <img src="decouplingParameterEstimation.png" width="100%"><br>
    </div>

    <div id="webMetabolPromise" class="step slide" data-x="0" data-y="-1500" data-z="-1500" data-scale="1">
        <img src="webmetabolPromise.png" width="100%"><br>
    </div>
    <div id="webMetabolPromise_FigTab" class="step slide" data-x="0" data-y="-800" data-z="-3000" data-scale="1">
        <img src="webMetabol_Fig1.png" width="75%"><br><img src="webMetabol_Table1.png" width="75%">
    </div>
<!--
<div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
        <p>and <b>tiny</b> ideas</p>
    </div>
-->
    <div id="neutralNets" class="step slide" data-x="0" data-y="-800" data-z="-4500" data-scale="1">
        <a href="http://www.biomedcentral.com/content/pdf/1752-0509-3-47.pdf" target=_blank style="font-size:large;line-height:0;color:navy">Vilela M, Vinga S, Grivet Mattoso Maia MA, Voit EO, Almeida JS. (2009) Identification of neutral biochemical network models from time series data. BMC Syst Biol. 2009 May 5;3(1):47.</a><hr>
        <img src="neutralNetCode.png" width="100%">
    </div>

    <div id="prepMS" class="step slide" data-x="0" data-y="0" data-z="-3000" data-scale="1">
        <a href="http://sourceforge.net/projects/prepms/files/" target=_blank><img src="prepMS.png" width="100%"></a>
    </div>

    <div id="bigData" class="step slide" data-x="1000" data-y="-2400" data-rotate="-90">
        <p>Big Data: when size, assynchrony, or heterogeneity exceed the ability of the local resources to handle it.</p>
        <p>&nbsp;</p>
        <p>
        <li>The global data space: the <a href="http://lod-cloud.net/versions/2011-09-19/lod-cloud_colored.html" style="color:blue" target=_blank>data cloud</a>.</li>
        <li>Open public data: <a href="https://www.data.gov/" style="color:blue" target=_blank>data.gov</a>.</li>
        <li>Open health data: <a href="https://www.healthdata.gov/" style="color:blue" target=_blank>healthdata.gov</a>.</li>
        <li>From Uniprot to Drug Bank: <a href="https://linkedlifedata.com/" style="color:blue" target=_blank>linkedlifedata.com</a>.</li>
        <li>...</li>
        <p>&nbsp;</p>
        <!-- <a href="https://www.youtube.com/embed/TXFYSWuEOOw" style="color:red" target=_blank>YouTube</a> -->
        <iframe width="420" height="315" src="https://www.youtube.com/embed/TXFYSWuEOOw" frameborder="0" allowfullscreen></iframe><a href="https://www.youtube.com/embed/TXFYSWuEOOw" style="color:red" target=_blank>YouTube</a>

        </p>
    </div>

    <div id="dataDeluge" class="step slide" data-x="1000" data-y="-2400" data-z="1500" data-rotate="-90">
        <img src="beyondDataDeluge.png" width="90%">
    </div>

    <div id="tcga" class="step slide" data-x="1000" data-y="-3400" data-rotate="-90">
        <a href="https://tcga-data.nci.nih.gov/tcga/" target=_blank><img src="https://tcga-data.nci.nih.gov/tcga/images/general/tcga-dp_logo.png"></a><br>
        <iframe src="https://tcga-data.nci.nih.gov/tcga/" width=100% height=550></iframe>
    </div>

    <div id="tcgaRoadMap" class="step slide" data-x="1000" data-y="-4400" data-rotate="-90">
        <i style="color:navy"><span style="font-size:large"><a href="http://tcga.github.com/Roadmap/" target=_blank>A Self-Updating Roadmap of The Cancer Genome Atlas</a></span><br><span style="font-size:medium">Robbins DE, A Gruneberg1, HF Deus3, MM Tanik, JS Almeida (2013) Bioinformatics (in press)</span></i><br>
        <iframe src="http://tcga.github.com/Roadmap" width=100% height=550></iframe>
    </div>

    <div id="angrybirds" class="step slide" data-x="-1000" data-y="-750">
        <img src="AngryBirdsLogo.png"><br>
        <img src="AngryBirds.png"><br>
        <a href="http://www.sciencedaily.com/releases/2012/07/120720103349.htm" target=_blank>Angry Birds meets Bioinformatics</a>
    </div>

    <div id="imagejs" class="step slide" data-x="-0" data-y="-750">
        <a style="font-size:large;color:navy;line-height:0" href="http://www.ncbi.nlm.nih.gov/pubmed/22934238" target=_blank>Almeida JS, E Iriabho, VL Gorrepati, S Wilkinson, DE Robbins, A Grüneberg, JR Hackney (2012) ImageJS: personalized, participated, pervasive and reproducible image bioinformatics in the web browser. J Pathology Informatics 3:25 [PMID:22934238].</a><hr>
        <iframe src="http://imagejs.org" width="100%" height="500"></iframe>
    </div>

    <div id="usm" class="step slide" data-x="1000" data-y="-750">
        <span style="font-size:large;color:navy;line-height:0">Almeida JS, A Grüneberg, W Maass, S Vinga (2012) Fractal MapReduce decomposition of sequence alignment. Algorithms for Molecular Biology 7:12 [<a style="color:blue" href="http://www.almob.org/content/7/1/12" target=_blank>PMID:22551205</a>].</span><hr>
        <iframe src="http://usm.github.com/" width="100%" height="500"></iframe>
    </div>

    <div id="qmachineHPC" class="step slide" data-x="2000" data-y="-750">
        <p>What about HPC problems?</p><hr><a href="http://www.hpcwire.com/hpcwire/2013-03-14/qmachine_combines_hpc_with_www.html" style="font-size:large;color:blue;line-height:0" target=_blank>HPC wire</a>
        <img src="qmachineHPCwire.png" width="100%">
        
    </div>

    <div id="qmachineArchitecture" class="step slide" data-x="2000" data-y="-750" data-z="-1500">
        <img src="qmachineArchitecture.png" width="100%">
        
    </div>

    <div id="qmachineVolunteering" class="step slide" data-x="2000" data-y="-750" data-z="-3000">
    <img src="voluteeringHPC.png" width="65%">
    <p style="font-size:large;color:navy">Foating-point performance distribution of the Top500 fastest supercomputers as of Nov 2012, given in terms of representative commodity laptops.</p>
    <div style="position:absolute;top:10px;right:10px;width:50%">
        "Even if we were given all the National Science Foundation supercomputing centers combined for a couple of months, that is still fewer resources than we have now, said Dr. Vijay Pande, the Stanford University biologist who directs Folding@home."<br>&nbsp;<br><i style="font-size:small">NYT 2002 Apr 23 "Supercomputing '@Home' Is Paying Off"</i>
    </div>
              
    </div>


    <div id="conclusions" class="step slide" data-x="-1000" data-y="0">
        <li><b style="color:blue">Safer</b>: browser sandbox</li>
        <li>More <b style="color:blue">reproducible</b>, versioned hosting</li>
        <li><b style="color:blue">Pervasive</b>, including mobile</li>
        <li><b style="color:blue">Scalable</b></li>
        <li id="socialCoding">Big Data &rarr; <b style="color:blue">Big Coding</b></li>
        <img id="gitHubSocialCoding" src="gitHubSocialCoding.png" width="20%" style="visibility:hidden">
        <img id="githubStatistics" src="githubStatistics.png" width="60%" style="visibility:hidden">
        <img id="githubLanguages" src="githubLanguages.png" width="60%" style="visibility:hidden">

        <script>
        socialCoding.onclick=function(){
            gitHubSocialCoding.style.visibility="visible";
        };
        gitHubSocialCoding.onclick=function(){
            githubStatistics.style.visibility="visible";
        };
        githubStatistics.onclick=function(){
            githubLanguages.style.visibility="visible";
        };

        </script>  
    </div>

    <div id="PathologyPersonalizedMedicine" class="step slide" data-x="-2000" data-y="-1500">
        <img src="PathologyPersonalizedMedicine.png" width="100%"><br><i>March 19, 2013</i>
    </div>

    <div id="pathologySubspeciality" class="step slide" data-x="-3000" data-y="-1500">
        <i>March 19, 2013</i><hr>
        <img src="pathologySubspeciality.png" width="100%">
    </div>

    <div id="theEnd" class="step" data-x="1000" data-y="-1000" data-z="-100" data-rotate-x="-40" data-rotate-y="5" data-scale="6">
    </div>



<script>
if ("ontouchstart" in document.documentElement) { 
    document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
}
</script>

<!--
    
    Last, but not least.
    
    To make all described above really work, you need to include impress.js in the page.
    I strongly encourage to minify it first.
    
    In here I just include full source of the script to make it more readable.
    
    You also need to call a `impress().init()` function to initialize impress.js presentation.
    And you should do it in the end of your document. Not only because it's a good practice, but also
    because it should be done when the whole document is ready.
    Of course you can wrap it in any kind of "DOM ready" event, but I was too lazy to do so ;)
    
-->
<script src="js/impress.js"></script>
<script>impress().init();</script>

<!--
    
    The `impress()` function also gives you access to the API that controls the presentation.
    
    Just store the result of the call:
    
        var api = impress();
    
    and you will get three functions you can call:
    
        `api.init()` - initializes the presentation,
        `api.next()` - moves to next step of the presentation,
        `api.prev()` - moves to previous step of the presentation,
        `api.goto( idx | id | element, [duration] )` - moves the presentation to the step given by its index number
                id or the DOM element; second parameter can be used to define duration of the transition in ms,
                but it's optional - if not provided default transition duration for the presentation will be used.
    
    You can also simply call `impress()` again to get the API, so `impress().next()` is also allowed.
    Don't worry, it wont initialize the presentation again.
    
    For some example uses of this API check the last part of the source of impress.js where the API
    is used in event handlers.
    
-->

</body>
</html>

